<template>
  <div class="bar">
    <div class="right">
      <t-button theme="primary" @click="form.submit()">
        <template #icon><t-icon name="check" /></template>
        {{ $t('common.ok') }}
      </t-button>
    </div>
    <div class="title">
      <t-button theme="default" shape="square" style="margin-right: 10px" @click="$router.back()">
        <template #icon><t-icon name="arrow-left" /></template>
      </t-button> 
      {{ formData.id ? $t('common.update') : $t('common.create') }}
    </div>
  </div>
  <div class="plugin-goods-form">
    <div class="box">
      <MenuSelect v-model="formData.menu_id" />
      <div class="box">
        <t-row :gutter="20">
        
          <t-col :xxl="10" :xl="9"  :md="8">
            <t-form ref="form" :data="formData" :rules="formRule" label-align="top" @submit="onSubmit">
              <div class="box bg-box">
                <div class="title">{{ plugin.t('form.tab.0') }}</div>
                <t-row :gutter="20">
                  <t-col :span="6">
                    <t-form-item :label="plugin.t('form.code')" name="name">
                      <t-input v-model="formData.code"/>
                    </t-form-item>
                  </t-col>
                  <t-col :span="6">
                    <t-form-item :label="plugin.t('form.number')" name="number">
                      <t-input v-model="formData.number" />
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row :gutter="20" style="margin-top: 20px">
                  <t-col :span="6">
                    <t-form-item :label="plugin.t('form.name')" name="name">
                      <t-input v-model="formData.name"/>
                    </t-form-item>
                  </t-col>
                  <t-col :span="6">
                    <t-form-item :label="plugin.t('form.sname')">
                      <t-input v-model="formData.sname" />
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row :gutter="20" style="margin-top: 20px">
                  <t-col :span="6">
                    <t-form-item :label="plugin.t('form.supplier_id')" name="supplier_id">
                      <SupplierSelect v-model="formData.supplier_id"/>
                    </t-form-item>
                  </t-col>
                </t-row>
              </div>

              <div class="box bg-box" style="margin-top: 20px">
                <div class="title">{{ plugin.t('form.tab.1') }}</div>
                <t-row :gutter="20">
                  <t-col :span="4">
                    <t-form-item :label="plugin.t('form.tax_id')">
                      <t-select v-model="formData.tax_id">
                        <t-option label="-" :value="0" />
                        <t-option v-for="item in taxStore.getList()" :value="item.id" :label="item.name" />
                      </t-select>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item :label="plugin.t('form.price')" name="price">
                      <t-popup :content="plugin.t('form.price_message', { ...priceData })" placement="top-left" destroy-on-close>
                        <t-input-number :value="Number(formData.price)" @change="onPrice" theme="normal" style="width: 100%;">
                          <template #suffix>
                            <t-icon name="arrow-left" style="cursor: pointer" @click="onPriceMath()" />
                            <t-icon name="arrow-right" style="cursor: pointer" @click="onPriceMath(true)" />
                          </template>
                        </t-input-number>
                      </t-popup>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item :label="plugin.t('form.price_two')">
                      <t-input-number :value="Number(formData.price_two)" @change="value => formData.price_two = value ?? 0" theme="column" style="width: 100%" />
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row :gutter="20" style="margin-top: 20px">
                  <t-col :span="4">
                    <t-form-item :label="plugin.t('form.price_discount')">
                      <t-input-number :value="Number(formData.price_discount)" @change="value => formData.price_discount = value ?? 0" theme="column" style="width: 100%" />
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item :label="plugin.t('form.price_cost')">
                      <t-popup :content="plugin.t('form.price_cost_message')" placement="top-left" destroy-on-close>
                        <t-input-number :decimalPlaces="4" :value="Number(formData.price_cost)" @change="value => formData.price_cost = value ?? 0" theme="normal" style="width: 100%">
                          <template #suffix>
                            <t-icon name="arrow-left" style="cursor: pointer" @click="onPriceCost" />
                          </template>
                        </t-input-number>
                      </t-popup>
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-alert style="margin-top: 20px">
                  <template #message>
                    {{ 
                      plugin.t('form.tax_message', { 
                        type: configPlugin.tm('form.tax_type_text')[configStore.taxType()]
                      }) 
                    }}
                  </template>
                </t-alert>
              </div>

              <div class="box bg-box" style="margin-top: 20px">
                <div class="title">{{ plugin.t('form.tab.2') }}</div>
                <t-row :gutter="20">
                  <t-col :span="4">
                    <t-form-item :label="plugin.t('form.count_min')">
                      <t-input-number v-model="formData.count_min" theme="normal" style="width: 100%" />
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item :label="plugin.t('form.count_max')">
                      <t-input-number v-model="formData.count_max" theme="normal" style="width: 100%" />
                    </t-form-item>
                  </t-col>
                </t-row>
              </div>

              <div class="box bg-box" style="margin-top: 20px">
                <div class="title">{{ plugin.t('form.tab.3') }}</div>
                <t-row :gutter="20">
                  <t-col :span="4">
                    <t-form-item :label="plugin.t('form.append')">
                      <t-select v-model="formData.append">
                        <t-option v-for="(item, index) in plugin.tm('form.append_text')" :value="index" :label="item" />
                      </t-select>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item :label="plugin.t('form.unit')">
                      <t-input v-model="formData.unit" />
                    </t-form-item>
                  </t-col>
                  <t-col :span="4">
                    <t-form-item :label="plugin.t('form.unit_count')">
                      <t-input-number v-model="formData.unit_count" :min="0" theme="normal" style="width: 100%" />
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-alert style="margin-top: 20px">
                  <template #message>
                    {{ plugin.t('form.append_message') }}
                  </template>
                </t-alert>
              </div>
            </t-form>
          </t-col>

          <t-col :xxl="2" :xl="3" :md="4">
            <div class="box bg-box">
              <div class="title">{{ plugin.t('form.image') }}</div>
              <Upload v-model="formData.image">
                <template #default="scope">
                  <t-loading :loading="scope.loading" show-overlay>
                    <div class="image" @click="scope.click">
                      <img v-if="formData.image" :src="app.img(formData.image)" />
                      <span v-else>
                        <t-icon name="upload" size="large"/>
                      </span>
                    </div>
                  </t-loading>
                </template>
              </Upload>
            </div>
          </t-col>

        </t-row>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, reactive } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import goodsStore from '../../store'
  import menuStore from '../../store/menu'
  import configStore from '@/plugin/config/store'
  import taxStore from '@/plugin/config/store/tax'
  import configIndex from '@/plugin/config/index'
  import SupplierSelect from '@/plugin/supplier/components/select.vue'
  import Upload from '@/components/upload.vue'
  import MenuSelect from '../menu/select.vue'

  const plugin = index.plugin
  const configPlugin = configIndex.plugin

  const loading = ref(false)
  const priceData = reactive({
    tax: 0,
    price: 0
  })
  const form = ref(null)
  const formData = ref(Object.assign({
      supplier_id: 0,
      menu_id: menuStore.getIndex() ?? 0,
      tax_id: 0,
      name: '',
      sname: '',
      code: '',
      number: '',
      price: 0,
      price_two: 0,
      price_cost: 0,
      price_discount: 0,
      image: '',
      count_max: 0,
      count_min: 0,
      unit: '', 
      unit_count: 0,
      append: 0
    }, goodsStore.getIndex()))
  const formRule = {
    name: [{ required: true, message: ' ', type: 'error' }],
    number: [{ required: true, message: ' ', type: 'error' }],
    code: [{ required: true, message: ' ', type: 'error' }],
    price: [{ required: true, message: ' ', type: 'error' }]
  }

  const onSubmit = ({ validateResult }) => {
    if (validateResult === true) {
      loading.value = true
      goodsStore.update(formData.value).then(res => {
        app.message('success', 'message.' + res.message)
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }

  // 推算价格
  const onPriceMath = (type = false) => {
    const func = type ? app.math.addpro : app.math.divpro

    onPrice(func(
      formData.value.price, 
      taxStore.tax(formData.value.tax_id)
    ))
  }

  // 更新价格
  const onPrice = price => {
    formData.value.price = price ?? 0
    onPriceTax()
  }

  // 实时税率计算显示
  const onPriceTax = () => {
    if(configStore.taxType()) {
      priceData.tax = app.math.sub(
        formData.value.price,
        app.math.divpro(formData.value.price, taxStore.tax(formData.value.tax_id))
      )
      priceData.price = formData.value.price
    } else {
      priceData.tax = app.math.pro(formData.value.price, taxStore.tax(formData.value.tax_id))
      priceData.price = app.math.add(formData.value.price, priceData.tax)
    }
    
    priceData.tax = app.money.format(priceData.tax)
    priceData.price = app.money.format(priceData.price)
  }

  // 成本价回推
  const onPriceCost = () => {
    formData.value.price_cost = app.math.factory(formData.value.price_cost).divpro(
      taxStore.tax(formData.value.tax_id)
    ).format(4)
  }

  menuStore.get()
  configStore.get()
  taxStore.get().then(() => {
    if(!formData.value.tax_id) {
      formData.value.tax_id = taxStore.default()
    }
    // 更新实时税率
    onPriceTax()
  })
  
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-goods-form{
    overflow: hidden;
    
    .title{
      color: $color-title;
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 20px;
    }
    .image{
      width: 100%;
      border: 1px $color-bg solid;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      span{
        display: block;
        color: $color-body;
        font-size: 14px;
        line-height: 200px; 
        text-align: center;
      }

      img{
        width: 80%;
        display: block;
        margin: 25px auto;
      }
    }
  }
</style>